<template>
	<div class="game-container report-container">
		<div class="params">
			<el-form
				ref="formSearch"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item
					:label="`${$t('system.domain_name_configuration.type')}:`"
				>
					<el-select
						v-model="queryData.domainType"
						size="medium"
						:placeholder="`${$t('common.select_all')}`"
					>
						<el-option
							v-for="item in domainBizTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.domain_name_configuration.status')}:`"
				>
					<el-select
						v-model="queryData.status"
						size="medium"
						:placeholder="`${$t('common.select_all')}`"
					>
						<el-option
							v-for="item in domainStatusArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('system.domain_name_configuration.address')}:`
					"
				>
					<el-input
						v-model.trim="queryData.domain"
						clearable
						size="medium"
						:maxlength="200"
						style="width: 280px"
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item :label="`${$t('common.updateBy')}:`">
					<el-input
						v-model="queryData.updatedBy"
						v-symbols
						clearable
						size="medium"
						:maxlength="20"
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('902011')"
						type="warning"
						icon="el-icon-plus"
						:disabled="loading"
						size="medium"
						@click="addAndEdit($t('common.add'))"
					>
						{{ $t('common.add') }}
					</el-button>
					<el-button
						v-if="hasPermission('903012')"
						type="success"
						icon="el-icon-folder"
						:disabled="loading"
						size="medium"
						@click="importData()"
					>
						{{ $t('common.import') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%"
				highlight-current-row
				:header-cell-style="getRowClass"
			>
				<el-table-column
					align="center"
					type="index"
					:label="`${$t('common.serial_number')}`"
				>
					<template slot-scope="scope">
						<span>{{ getSerialNum(scope.$index) }}</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('system.domain_name_configuration.address')}`"
					prop="domain"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.domain || '' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('system.domain_name_configuration.status')}`"
					prop="status"
				>
					<template slot-scope="scope">
						<div
							:class="
								scope.row.status === 1
									? 'normalRgba'
									: 'disableRgba'
							"
						>
							{{
								typeFilter(
									scope.row.status,
									'configdomainStatus'
								)
							}}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('system.domain_name_configuration.type')}`"
					prop="domainType"
				>
					<template slot-scope="scope">
						{{
							typeFilter(scope.row.domainType, 'configdomainType')
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="
						`${$t(
							'system.domain_name_configuration.domain_description'
						)}`
					"
					prop="domainDesc"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.domainDesc || '' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('common.createBy')}`"
					prop="createdBy"
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('common.createAt')}`"
					prop="createdAt"
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('common.updateBy')}`"
					prop="updatedBy"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedBy || '' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('common.last_updateAt')}`"
					prop="updatedAt"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '' }}
					</template>
				</el-table-column>
				<el-table-column
					fixed="right"
					align="center"
					:label="`${$t('common.actions')}`"
					width="200"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('903013')"
							type="primary"
							icon="el-icon-edit"
							size="medium"
							@click.stop="
								addAndEdit($t('common.edit'), scope.row)
							"
						>
							{{ $t('common.edit') }}
						</el-button>
						<el-button
							v-if="hasPermission('903014')"
							type="danger"
							icon="el-icon-delete"
							size="medium"
							:disabled="scope.row.status === 1"
							@click="dele(scope.row)"
						>
							{{ $t('common.delete') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</div>
		<el-dialog
			:visible.sync="dialogVisible"
			:width="$i18n.locale === 'zh_CN' ? `500px` : `600px`"
			:destroy-on-close="true"
			:show-close="false"
			class="addBox"
			@close="onDialogClose"
		>
			<div slot="title" class="header-title">
				<div class="leftText">
					{{ createOrEditDialog.type }}
					{{ $t('system.domain_name_configuration.domain') }}
				</div>
				<div class="rightText">
					<span>*</span>
					{{ $t('common.add_dialog_tips') }}
				</div>
			</div>
			<el-form
				ref="createOrEditDialog"
				:model="createOrEditDialog.form"
				label-width="100px"
				:rules="rules"
				:close="onDialogClose"
			>
				<el-form-item
					:label="
						`${$t('system.domain_name_configuration.address')}:`
					"
					prop="domain"
				>
					<el-input
						v-model.trim="createOrEditDialog.form.domain"
						:placeholder="
							`${$t(
								'system.domain_name_configuration.please_input_address'
							)}`
						"
						clearable
						:disabled="
							createOrEditDialog.type === $t('common.edit')
						"
						maxlength="200"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.domain_name_configuration.type')}:`"
					prop="domainType"
				>
					<el-select
						v-model="createOrEditDialog.form.domainType"
						:placeholder="$t('common.please_choose')"
						style="width:100%"
						:disabled="
							createOrEditDialog.type === $t('common.edit')
						"
					>
						<el-option
							v-for="item in domainBizTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.domain_name_configuration.status')}:`"
					prop="status"
				>
					<el-radio-group v-model="createOrEditDialog.form.status">
						<el-radio
							v-for="item in domainStatusArr"
							:key="item.code"
							:label="item.code"
						>
							{{ item.description }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('system.domain_name_configuration.description')}:`
					"
				>
					<el-input
						v-model.trim="createOrEditDialog.form.domainDesc"
						type="textarea"
						maxlength="50"
						show-word-limit
						clearable
						@input="handleInput"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="save">
					{{ $t('common.confirm') }}
				</el-button>
			</span>
		</el-dialog>
		<uploadFile
			:uploadVisible.sync="uploadVisible"
			@load-data="search"
		></uploadFile>
	</div>
</template>

<script>
import list from '@/mixins/list'
import uploadFile from './components/uploadFile.vue'
import { NO_SPECIAL_CHAR } from '@/utils/pattern'

export default {
	// eslint-disable-next-line vue/name-property-casing
	name: 'domainNameConfiguration',
	components: { uploadFile },
	mixins: [list],
	data() {
		return {
			queryData: {},
			dataList: [],
			dialogVisible: false,
			uploadVisible: false,
			createOrEditDialog: {
				type: '',
				form: {
					domain: undefined,
					domainType: undefined,
					status: '1',
					domainDesc: undefined,
					id: undefined
				}
			},
			rules: {
				domain: [
					{
						required: true,
						message: this.$t(
							'system.domain_name_configuration.please_input_address'
						),
						trigger: 'blur'
					}
				],
				domainType: {
					required: true,
					message: this.$t(
						'system.domain_name_configuration.please_select_type'
					),
					trigger: 'change'
				},
				status: [
					{
						required: true,
						message: this.$t(
							'system.domain_name_configuration.please_status'
						),
						trigger: 'change'
					}
				]
			}
		}
	},
	computed: {
		domainBizTypeArr() {
			return this.globalDics.configdomainType || []
		},
		domainStatusArr() {
			return this.globalDics.configdomainStatus || []
		}
	},
	methods: {
		handleInput(val) {
			this.createOrEditDialog.form.domainDesc = val.replace(
				NO_SPECIAL_CHAR,
				''
			)
		},
		loadData() {
			this.loading = true
			const params = {
				...this.getParams(this.queryData)
			}
			this.$api
				.getDomainList(params)
				.then((res) => {
					const { record, totalRecord } = res.data || {}
					this.dataList = Array.isArray(record)
						? Object.freeze(record)
						: []
					this.total = totalRecord || 0
					this.loading = false
				})
				.catch(() => (this.loading = false))
		},
		addAndEdit(type, data) {
			this.dialogVisible = true
			this.createOrEditDialog.type = type
			if (data) {
				const { id, domain, domainType, domainDesc, status } = data
				this.createOrEditDialog.form = Object.assign(
					{},
					{
						id,
						domain,
						domainDesc,
						domainType: String(domainType),
						status: String(status)
					}
				)
			}
		},
		onDialogClose() {
			this.createOrEditDialog.form = {
				domain: undefined,
				domainType: undefined,
				status: '1',
				domainDesc: undefined,
				id: undefined
			}
		},
		importData() {
			this.uploadVisible = !this.uploadVisible
		},
		save() {
			this.$refs.createOrEditDialog.validate((valid) => {
				if (valid) {
					const loading = this.$loading({
						lock: true,
						text: '',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					const api =
						this.createOrEditDialog.type === this.$t('common.edit')
							? 'updateAppDomain'
							: 'addAppDomain'
					this.$api[api](this.createOrEditDialog.form)
						.then(() => {
							this.dialogVisible = false
							this.$message.success(
								this.createOrEditDialog.type ===
									this.$t('common.edit')
									? this.$t('common.edit_success')
									: this.$t('common.add_success')
							)
							loading.close()
							this.loadData()
						})
						.catch(() => {
							loading.close()
						})
				}
			})
		},
		dele({ id }) {
			this.$confirm(
				`<strong>${this.$t(
					'system.domain_name_configuration.is_comfirm_delelte'
				)}？</strong>`,
				this.$t('system.domain_name_configuration.tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					const loading = this.$loading({
						lock: true,
						text: '',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					this.$api
						.deleteDomain({ id })
						.then(() => {
							this.$message.success(
								this.$t('common.delete_success')
							)
							loading.close()
							this.loadData()
						})
						.catch(() => loading.close())
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.pageNum = 1
			this.queryData = {}
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	padding: 0;
	color: #606266;
	.header-title {
		line-height: 60px;
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #e0e0e0;
		.leftText {
			font-weight: 700;
		}
		.rightText {
			font-size: 14px;
			span {
				color: red;
			}
		}
	}
}
::v-deep .addBox .el-dialog__body {
	padding: 30px;
	margin: 10px;
	form {
		width: 90%;
		margin: 0 auto;
	}
}
::v-deep .el-dialog__footer {
	text-align: center;
}
</style>
